import LotteryGridItem from "../lotteryGridItem/lotteryGridItem"
import { useState } from "react"
import axios from 'axios';

class LotteryAnimation {
    // round: how many rounds
    // time: initial time of one scroll
    constructor(round = 8, time = 200) {
        this.timer = null;
        this.round = round;
        this.time = time;
    }


    startAnimation(luckyNum, setChosenIndex, callback) {
        if (this.timer !== null) return;
        const n = 8;
        let indexList = [0, 3, 5, 6, 7, 4, 2, 1];
        let intervals = { 0.1: 0.75, 0.2: 0.5, 0.3: 0.25, 0.7: 0.5, 0.8: 0.75, 0.9: 1.0 };

        let cur = 0, cnt = 0, target = this.round * n + indexList.indexOf(luckyNum) + 1;
        console.log(`target = ${target}, lucky = ${luckyNum}`);
        this.timer = setInterval(scroll.bind(this), this.time);

        function scroll() {
            setChosenIndex(indexList[cur]);
            cur = (cur + 1) % n;
            cnt++;
            for (const [key, val] of Object.entries(intervals)) {
                if (cnt === Math.floor(target * key)) {
                    clearInterval(this.timer);
                    this.timer = setInterval(scroll.bind(this), this.time * val);
                }
            }

            if (cnt === target) {
                clearInterval(this.timer);
                this.timer = null;
                callback(luckyNum);
                return;
            }
        }
    }
}
const lotteryanimation = new LotteryAnimation();
function LotteryGrid(props) {
    const [chosenIndex, setChosenIndex] = useState(-1);

    const onClickLottory = () => {
        // 点击抽奖
        if (props.stonecoin >= 200) {
            if (lotteryanimation.timer !== null) return;
            axios.get(`/V1/lottery?user=${props.user}`)
                .then((res) => {
                    console.log(res)
                    if (res.data.code === 200) {
                        let luckyNum = res.data.prize.index;
                        lotteryanimation.startAnimation(luckyNum, setChosenIndex, (luckyNum) => {
                            props.handleLottery(luckyNum);
                        });
                    } else {
                        console.log(`Return code is: ${res.data.code}`);
                    }
                })
                .catch((res) => {
                    console.log(res);
                });
        }
        else {
            console.log("矿石不足，无法抽奖");
        }

        // lotteryanimation.startAnimation(luckyNum, setChosenIndex, (index) => {
        //     props.handleLottery(index);
        // });
    }
    const button = {
        buttonText: "抽奖",
        text: "200矿石/次",
        click: onClickLottory,
        type: "button"
    }
    return (
        <div className="lottery">
            <div className="item-container">
                {
                    props.prizePool.slice(0, 4).map((item, index) =>
                        <LotteryGridItem data={item} key={index} chosen={chosenIndex === index} ></LotteryGridItem>)
                }
                {
                    <LotteryGridItem data={button} ></LotteryGridItem>
                }
                {
                    props.prizePool.slice(4, 8).map((item, index) =>
                        <LotteryGridItem data={item} key={index} chosen={chosenIndex === index + 4} ></LotteryGridItem>)
                }
            </div>
        </div>
    )
}
export default LotteryGrid;